import { defineComponent, ref } from "vue"
import { inject } from "vue"

import HeaderTh from "./header-th"
import { getDomResizeObserverCompKey } from "../util"
import { COMPS_NAME, EMIT_EVENTS } from "../util/constant"
import VueDomResizeObserver from "amtf/components/resize-observer"

import { useEmitter } from "amtf/hooks"

import { use样式 } from "amtf/hooks"
import { getValByUnit, 拼组件名, isFunction, isBoolean, getRandomId } from "amtf/utils"
const 主名 = "table-header-tr"
const 组件名 = 拼组件名(主名)

export default defineComponent({
    name: 组件名,

    props: {
        columnsOptionResetTime: {
            type: Number,
            default: 0,
        },
        // group columns item
        groupColumn: {
            type: Array,
            required: true,
        },
        headerRows: {
            type: Array,
            default: () => [],
        },
        colgroups: {
            type: Array,
            required: true,
        },
        fixedHeader: {
            type: Boolean,
            required: true,
        },
        isGroupHeader: {
            type: Boolean,
            required: true,
        },
        rowIndex: {
            type: Number,
            required: true,
        },
        cellSelectionData: {
            type: Object,
            default: () => null,
        },
        // cell selection range data
        cellSelectionRangeData: {
            type: Object,
            default: () => null,
        },
        headerIndicatorColKeys: {
            type: Object,
            default: () => null,
        },
        // checkbox option
        checkboxOption: {
            type: Object,
            default: () => null,
        },
        // sort option
        sortOption: {
            type: Object,
            default: () => null,
        },
        // sort columns
        sortColumns: {
            type: Object,
            default: () => null,
        },
        // cell style option
        cellStyleOption: {
            type: Object,
            default: () => null,
        },
        // event custom option
        eventCustomOption: {
            type: Object,
            default: () => null,
        },
    },
    setup(props) {
        const { dispatch } = useEmitter(inject("表格id"))
        const { 拼样式名_table直属 } = use样式(主名)

        const trHeightChange = ({ height }) => {
            dispatch(EMIT_EVENTS.HEADER_ROW_HEIGHT_CHANGE, {
                rowIndex: props.rowIndex,
                height: height,
            })
        }

        // 方法：rowClick
        const rowClick = (e, fn) => {
            fn && fn(e)
        }
        // 方法：rowDblclick
        const rowDblclick = (e, fn) => {
            fn && fn(e)
        }
        // 方法：rowContextmenu
        const rowContextmenu = (e, fn) => {
            fn && fn(e)
        }
        // 方法：rowMouseenter
        const rowMouseenter = (e, fn) => {
            fn && fn(e)
        }
        // 方法：rowMouseleave
        const rowMouseleave = (e, fn) => {
            fn && fn(e)
        }
        // 方法：rowMousemove
        const rowMousemove = (e, fn) => {
            fn && fn(e)
        }
        // 方法：rowMouseover
        const rowMouseover = (e, fn) => {
            fn && fn(e)
        }
        // 方法：rowMousedown
        const rowMousedown = (e, fn) => {
            fn && fn(e)
        }
        // 方法：rowMouseup
        const rowMouseup = (e, fn) => {
            fn && fn(e)
        }

        const customEvents = ref({})
        if (props.eventCustomOption) {
            const { headerRowEvents } = props.eventCustomOption
            customEvents.value = headerRowEvents ? headerRowEvents({ rowIndex: props.rowIndex }) : {}
        }

        const { click, dblclick, contextmenu, mouseenter, mouseleave, mousemove, mouseover, mousedown, mouseup } =
            customEvents.value

        const events = {
            onClick: e => {
                rowClick(e, click)
            },
            onDblClick: e => {
                rowDblclick(e, dblclick)
            },
            onContextmenu: e => {
                rowContextmenu(e, contextmenu)
            },
            onMouseEnter: e => {
                rowMouseenter(e, mouseenter)
            },
            onMouseleave: e => {
                rowMouseleave(e, mouseleave)
            },
            onMousemove: e => {
                rowMousemove(e, mousemove)
            },
            onMouseover: e => {
                rowMouseover(e, mouseover)
            },
            onMousedown: e => {
                rowMousedown(e, mousedown)
            },
            onMouseup: e => {
                rowMouseup(e, mouseup)
            },
        }

        return () => {
            // console.log(`header-tr  props.groupColumn 👉`,props.groupColumn)
            const trProps = {
                key: getDomResizeObserverCompKey(props.rowIndex, props.columnsOptionResetTime),
                // class: 拼样式名_table直属('header-tr'),
                tagName: "tr",
                onDomResizeChange: trHeightChange,
                ...events,
            }
            // console.log(`props.colgroups 👉`, props.colgroups)
            return (
                <VueDomResizeObserver {...trProps} class={拼样式名_table直属("header-tr")}>
                    {props.groupColumn.map(groupColumnItem => {
                        const thProps = {
                            key: groupColumnItem.key,
                            groupColumn: props.groupColumn,
                            groupColumnItem,
                            colgroups: props.colgroups,
                            headerRows: props.headerRows,
                            fixedHeader: props.fixedHeader,
                            isGroupHeader: props.isGroupHeader,
                            rowIndex: props.rowIndex,
                            checkboxOption: props.checkboxOption,
                            sortOption: props.sortOption,
                            sortColumns: props.sortColumns,
                            cellStyleOption: props.cellStyleOption,
                            eventCustomOption: props.eventCustomOption,
                            cellSelectionData: props.cellSelectionData,
                            cellSelectionRangeData: props.cellSelectionRangeData,
                            headerIndicatorColKeys: props.headerIndicatorColKeys,
                        }
                        return <HeaderTh {...thProps} />
                    })}
                </VueDomResizeObserver>
            )
        }
    },
})
